<!--
 * @Description: 表头单元格渲染组件
 * @version:
 * @Author: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <section class="icr-renderTitle" :class="{ 'inline-block': inlineBlock }">
    <template v-if="column">
      <div
        class="title-text"
        :class="[{ 'ws-nowrap': wsNoWrap }, { 'ws-wrap': !wsNoWrap }]"
        :style="{
          height: column.height + 'px',
          lineHeight: column.height + 'px',
          minWidth:
            (column.isLeaf && column.adjusted
              ? column.fillWidth + column.stretchW
              : column.width + column.stretchW) + 'px',
          width: column.isLeaf
            ? column.fillWidth + column.stretchW + 'px'
            : 'auto',
          borderBottom: column.isLeaf ? 'none' : '1px solid'
        }"
      >
        <div class="control-text">
          <div
            v-for="(item, index) in column.title.split(';')"
            :key="index"
            style="width: 100%"
          >
            {{ item }}
          </div>
          <div style="width: 100%">{{ column.propUnit }}</div>
        </div>
      </div>
      <section v-if="column.childList.length" class="subItems block">
        <!-- <icr-render-title v-for="(item, idx) in column.childList" :key="idx" :column="item" inline-block ws-no-wrap /> -->
        <component
          :is="'IcrRenderTitle'"
          v-for="(item, idx) in column.childList"
          :key="idx"
          :inline-block="inlineBlock"
          :column="item"
          :ws-no-wrap="wsNoWrap"
        />
      </section>
    </template>
    <span
      v-else
      class="titleText"
      :class="[{ 'ws-nowrap': wsNoWrap }, { 'ws-wrap': !wsNoWrap }]"
    >
      错误表头数据为空
    </span>
  </section>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IcrRenderTitle',
  props: {
    column: {
      type: Object,
      default: null
    },
    inlineBlock: {
      type: Boolean,
      default: true
    },
    wsNoWrap: {
      type: Boolean,
      default: false
    },
    firstRow: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // console.log(props.column)
  }
})
</script>

<style lang="scss" scoped>
.icr-renderTitle {
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
  // overflow: hidden;
}

.title-text {
  box-sizing: border-box;
  // display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;

  // text-align: center;
  vertical-align: top;
}

.control-text {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  line-height: 1;

  // text-align: left;
  vertical-align: baseline;
  font-size: 12px;
  // font-weight: bold;
}

.subItems {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.ws-nowrap {
  white-space: nowrap;
}

.ws-wrap {
  white-space: normal;
}
</style>
